<template>
  <div>
    <!-- 未登录页面 -->
    <div v-if="!login">
      <img src="@/assets/unlogin.png" alt="请先登录">
      <h1>PLEASE LOG IN FIRST</h1>
      <button @click="toLogin">去登陆</button>
    </div>
    <!-- 已登录显示 -->
    <div v-if="login">
      <ul>
        <li v-for="item in beFollowerMsgs" :key="item.id">
          <FriendLi :friend="item" :subscription="true" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import FriendLi from "@/components/friendListValue/FriendLi.vue";
import { getCookie } from "@/tool/ToolCookie";
export default {
  data() {
    return {
      beFollowerMsgs: [],
      login: false,
    };
  },
  components: {
    FriendLi,
  },
  methods: {
    // 打包被关注者(beFollower)数据
    packagingData(Data) {
      Data.beFollows.forEach((item, index) => {
        item.followerNum = Data.followerNums[index];
        item.nodeNum = Data.nodeNums[index];
        (item.username = Data.users[index].username),
          (item.description = Data.users[index].description),
          (item.sex = Data.users[index].sex),
          (item.email = Data.users[index].mail);
      });
    },
    // 跳转登录页面
    toLogin(){
      this.$router.push({
        path:'/login'
      })
    }
  },
  mounted() {
    // 判断是否登录
    if (getCookie("userId") == null) {
      // 设置未登录标志，显示未登录页面
      this.login = false;
      return; // 未登录就不请求用户信息
    }
    // 设置已登录标志，显示登录页面
    this.login = true;
    // 通过id(userId)发送请求得到后端的登录用户关注者数据
    this.$axios({
      method: "post",
      url:
        "http://localhost:8181/follow/getBeFollowerMsgById/" +
        this.$route.query.id,
    }).then(
      (res) => {
        // console.log(res.data);
        this.packagingData(res.data.data);
        this.beFollowerMsgs = res.data.data.beFollows;
      },
      (err) => {
        console.log(err);
      }
    );
  },
};
</script>

<style scoped>
ul {
  list-style: none;
}
li {
  padding: 10px 0;
  border-bottom: 1px solid #55556d;
  height: 110px;
  width: 740px;
  overflow: hidden;
}
img {
  display: block;
  margin: 100px auto 0 auto;
  height: 300px;
  width: 400px;
}
h1 {
  text-align: center;
  color: #fff;
}
button {
  display: block;
  margin: 10px auto;
  height: 80px;
  width: 200px;
  background-color: #2ecc71;
  border: #55556d solid 2px;
  border-radius: 20px;
  font-size: xx-large;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
}
</style>